<template>
    <div class="app-container">
        <!-- 主体 start -->
        <el-container>
            <el-main height>
                <div>
                    <el-row>
                        <el-col :span="8" :offset="0">
                            <el-form label-width="100px">
                                <el-form-item label="用户账号">
                                    <el-input
                                        v-model="search.email"
                                        placeholder="请输入用户账号"
                                        clearable
                                        :style="{width: '100%'}"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item size="large">
                                    <el-button type="primary" @click="getList">查 询</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
                <!-- 表格 start -->
                <el-table
                    border
                    :data="userList.List"
                    v-loading="loading"
                    style="width: 100%;margin-top:30px"
                >
                    <el-table-column align="center" prop="NickName" label="昵称" width="100px"></el-table-column>
                    <el-table-column align="center" prop="Email" label="邮箱账号" width="200px"></el-table-column>
                    <el-table-column align="center" prop="Star" label="星级" width="80px"></el-table-column>
                    <el-table-column align="center" prop="Balance" label="可用余额" width="100px"></el-table-column>
                    <el-table-column align="center" prop="BlockBalance" label="冻结余额" width="100px"></el-table-column>
                    <el-table-column align="center" prop="State" label="状态" width="150px">
                        <template slot-scope="scope">
                            <el-switch
                                style="display: block"
                                v-model="scope.row.State"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="启用"
                                inactive-text="停用"
                                @change="updataUserState(scope.row,$event)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="MonthlyPackage"
                        label="包月套餐"
                        width="100px"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.MonthlyPackage==1" style="color:#409EFF">●试用</div>
                            <div v-if="scope.row.MonthlyPackage==2" style="color:#67C23A">●月卡</div>
                            <div v-if="scope.row.MonthlyPackage==3" style="color:#E6A23C">●半年卡</div>
                            <div v-if="scope.row.MonthlyPackage==4" style="color:#F56C6C">●年卡</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="DueDate" label="到期时间"></el-table-column>
                    <el-table-column align="center" prop="CreateTime" label="注册时间"></el-table-column>
                    <el-table-column align="center" label="操作" width="200px">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="showjijin(scope.row)">基金</el-button>
                            <el-button type="primary" size="mini" @click="showPupop(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top:20px">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="search.CurrentPage"
                        :page-sizes="[10, 20, 30, 40,50]"
                        :page-size="search.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="userList.TotalCount"
                    ></el-pagination>
                </div>
                <!-- 表格 end -->
            </el-main>
        </el-container>
        <!-- 主体 end -->
        <!-- 查看弹窗 start -->
        <el-dialog
            title="查看"
            :visible.sync="pupopState"
            :close-on-click-modal="false"
            class="edit-form"
        >
            <el-form label-width="100px">
                <el-form-item label="昵称">
                    <el-input
                        v-model="row.NickName"
                        placeholder="请输入昵称"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="邮箱账号">
                    <el-input
                        v-model="row.Email"
                        placeholder="请输入邮箱账号"
                        readonly
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="可用余额">
                    <el-input
                        v-model="row.Balance"
                        placeholder="请输入可用余额"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="冻结余额">
                    <el-input
                        v-model="row.BlockBalance"
                        placeholder="请输入冻结余额"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="包月套餐">
                    <el-select
                        v-model="row.MonthlyPackage"
                        placeholder="请选择包月套餐"
                        clearable
                        :style="{width: '100%'}"
                    >
                        <el-option
                            v-for="(item, index) in MonthlyPackageOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="到期时间">
                    <el-input
                        v-model="row.DueDate"
                        placeholder="请输入到期时间"
                        :disabled="true"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="火币api">
                    <el-input
                        v-model="row.HbApiKey"
                        placeholder="请输入火币api"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="火币Secret">
                    <el-input
                        v-model="row.HbSecretKey"
                        placeholder="请输入火币Secret "
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="火币现货账户">
                    <el-input
                        v-model="row.HbSpotAccountId"
                        placeholder="请输入火币现货账户"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-input
                        v-model="row.CreateTime"
                        placeholder="请输入注册时间"
                        :disabled="true"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch
                        v-model="row.State"
                        active-text="启用"
                        inactive-text="禁用"
                        active-color="#67C23A"
                        inactive-color="#F56C6C"
                    ></el-switch>
                </el-form-item>
                <el-form-item label="是否过期">
                    <el-input
                        v-model="row.IsDue"
                        placeholder="是否过期"
                        :disabled="true"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="pupopState = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 查看弹窗 end -->
        <!-- 基金列表 start -->
        <el-dialog
            title="基金列表"
            :visible.sync="jiState"
            :close-on-click-modal="false"
            class="edit-form"
            width="80%"
        >
            <el-button
                type="primary"
                size="mini"
                v-if="jijinList.length<3"
                @click="upjijinStatess(1,'')"
            >添加</el-button>
            <el-table
                border
                :data="jijinList"
                v-loading="loadingji"
                style="width: 100%;margin-top:30px"
            >
                <el-table-column align="center" prop="Balance" label="余额"></el-table-column>
                <el-table-column align="center" prop="Bond" label="保证金"></el-table-column>
                <el-table-column align="center" prop="Grade" label="基金等级">
                    <template slot-scope="scope">
                        <div v-if="scope.row.Grade==1">A基金</div>
                        <div v-if="scope.row.Grade==2">B基金</div>
                        <div v-if="scope.row.Grade==3">C基金</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="CommunityLevel" label="社区等级">
                    <template slot-scope="scope">
                        <div v-if="scope.row.CommunityLevel==1">八星社区</div>
                        <div v-if="scope.row.CommunityLevel==2">七星社区</div>
                        <div v-if="scope.row.CommunityLevel==3">六星社区</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="State" label="状态">
                    <template slot-scope="scope">
                        <el-switch
                            style="display: block"
                            v-model="scope.row.State"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="激活"
                            inactive-text="未激活"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            type="success"
                            size="mini"
                            @click="upjijinStatess(2,scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="jiState = false">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 基金列表 end -->
        <!-- 修改列表 start -->
        <el-dialog
            title="基金详情"
            :visible.sync="upjijinState"
            :close-on-click-modal="false"
            class="edit-form"
        >
            <el-form ref="elForm" label-width="100px">
                <el-form-item label="余额">
                    <el-input
                        v-model="upjijinData.Balance"
                        placeholder="请输入单行文本余额"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="保证金">
                    <el-input
                        v-model="upjijinData.Bond"
                        placeholder="请输入单行文本保证金"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="基金等级">
                    <el-select
                        v-model="upjijinData.Grade"
                        placeholder="请选择基金等级"
                        clearable
                        :style="{width: '100%'}"
                        @change="xuanze"
                    >
                        <el-option
                            v-for="(item, index) in GradeOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="社区等级">
                    <el-select
                        v-model="upjijinData.CommunityLevel"
                        placeholder="请选择社区等级"
                        clearable
                        :style="{width: '100%'}"
                        disabled
                    >
                        <el-option
                            v-for="(item, index) in CommunityLevelOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="State">
                    <el-switch v-model="upjijinData.State" active-text="激活" inactive-text="未激活"></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="upjijinState = false">关 闭</el-button>
                <el-button type="primary" @click="jijinconfig">确定</el-button>
            </span>
        </el-dialog>
        <!-- 修改列表 end -->
    </div>
</template>

<script>
import {
    getUserList,
    UpdateUserState,
    GetWeightedFundAdminList,
    AddOrUpWeightedFund,
} from "../../api/user";
export default {
    data() {
        return {
            //表格参数
            loading: true,
            userList: [],
            search: {
                CurrentPage: 1,
                pageSize: 10,
                email: "",
            },
            //弹窗参数
            pupopState: false,
            row: {},
            MonthlyPackageOptions: [
                {
                    label: "试用",
                    value: 1,
                },
                {
                    label: "月卡",
                    value: 2,
                },
                {
                    label: "半年卡",
                    value: 3,
                },
                {
                    label: "年卡",
                    value: 4,
                },
            ],
            //基金
            jiState: false,
            loadingji: true,
            jijinList: [],
            //修改基金弹窗
            upjijinState: false,
            upjijinData: {
                Balance: undefined,
                Bond: undefined,
                Grade: 1,
                CommunityLevel: 1,
                State: true,
            },
            GradeOptions: [
                {
                    label: "A基金",
                    value: 1,
                },
                {
                    label: "B基金",
                    value: 2,
                },
                {
                    label: "C基金",
                    value: 3,
                },
            ],
            CommunityLevelOptions: [
                {
                    label: "八星社区",
                    value: 1,
                },
                {
                    label: "七星社区",
                    value: 2,
                },
                {
                    label: "六星社区",
                    value: 3,
                },
            ],
        };
    },
    watch: {},
    created() {
        this.getList();
    },
    methods: {
        //获取用户数据
        getList() {
            this.loading = true;
            getUserList(this.search).then((res) => {
                if (res.Code == 200) {
                    this.userList = res.Data;
                }
                this.loading = false;
            });
        },
        xuanze(val) {
            this.upjijinData.CommunityLevel = val;
        },
        jijinconfig() {
            AddOrUpWeightedFund(this.upjijinData).then((res) => {
                if (res.Code == 200) {
                    this.$message({
                        message: "提交成功",
                        type: "success",
                    });
                    this.upjijinState = false;
                    GetWeightedFundAdminList({ id: this.row.Id }).then(
                        (res) => {
                            if (res.Code == 200) {
                                this.jijinList = res.Data;
                                this.loadingji = false;
                            }
                        }
                    );
                }
            });
        },
        //修改基金弹窗
        upjijinStatess(type, row) {
            if (type == 1) {
                this.upjijinData = {
                    UserId: this.row.Id,
                    Balance: undefined,
                    Bond: undefined,
                    Grade: 1,
                    CommunityLevel: 1,
                    State: true,
                };
            } else {
                this.upjijinData = row;
            }

            this.upjijinState = true;
        },
        //基金弹窗
        showjijin(row) {
            this.row = row;
            this.jiState = true;
            GetWeightedFundAdminList({ id: this.row.Id }).then((res) => {
                if (res.Code == 200) {
                    this.jijinList = res.Data;
                    this.loadingji = false;
                }
            });
        },

        //修改用户状态
        updataUserState(row, data) {
            const title = data ? "启用" : "禁用";
            UpdateUserState({ id: row.Id }).then((res) => {
                {
                    if (res.Code == 200) {
                        this.$message({
                            message: "已" + title,
                            type: "success",
                        });
                    }
                }
            });
        },
        //弹窗
        showPupop(row) {
            this.row = row;
            this.pupopState = true;
        },
        handleSizeChange(val) {
            this.search.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.search.CurrentPage = val;
            this.getList();
        },
    },
};
</script>
<style>
.box {
    border: 1px solid #ccc;
    padding: 10px 0;
    margin-top: 20px;
}
.title {
    font-weight: bold;
    margin-left: 20px;
    font-size: 20px;
    padding: 20px 0;
}
</style>
